<template>
  <div class="search-content">
    <el-form
      ref="form"
      :model="formData"
      label-width="50px"
    >
      <el-form-item
        label="基地"
        prop="value"
        v-if="showValue"
      >
        <el-select
          v-model="formData.value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="日期"
        prop="time"
        v-if="showDate"
      >
        <el-date-picker
          v-model="formData.time"
          type="datetimerange"
          align="right"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['yyyy-MM-dd 00:00:00', 'yyyy-MM-dd 23:59:59']"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <slot name="others"></slot>
    </el-form>
    <el-button
      type="primary"
      @click="onSubmit"
    >查 询</el-button>
    <slot name="right"></slot>
  </div>
</template>
<script>
import { getBaseData } from '@/api/monitorManage/index'
export default {
  props: {
    defaultValue: {
      type: Object,
      default: () => ({})
    },
    conditions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      options: [],
      formData: {
        value: '',
        time: []
      }
    }
  },
  computed: {
    showValue() {
      return !this.conditions?.length || this.conditions.includes('value')
    },
    showDate() {
      return !this.conditions?.length || this.conditions.includes('date')
    }
  },
  created() {
    this.getTreeDate()
  },
  methods: {
    setDefaultTimeRange() {
      // 计算默认时间 日期默认选择最近7天
      let start = new Date()
      start.setHours(0, 0, 0)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      start = this.parseTime(start) + ''
      let end = new Date()
      end.setHours(23, 59, 59)
      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
      end = this.parseTime(end) + ''
      return [start, end]
    },
    getTreeDate() {
      getBaseData()
        .then((res) => {
          this.options = res
          if (this.options.length > 0) {
            this.options.unshift({
              id: '',
              name: '全部'
            })
          }
        })
        .catch((err) => {})
    },
    onSubmit() {
      let formData = this.formData
      if (formData.time?.length !== 2) {
        formData.time = this.setDefaultTimeRange
      }
      this.$emit('search', formData, this.options)
    }
  },
  watch: {
    defaultValue: {
      handler(newVal, oldVal) {
        if (
          newVal &&
          Object.prototype.toString.call(newVal) === '[object Object]'
        ) {
          this.formData.value = newVal.value || ''
          if (!newVal.time?.length) {
            this.formData.time = this.setDefaultTimeRange()
          } else {
            this.formData.time = newVal.time
          }
        } else {
          this.formData.value = ''
          this.formData.time = this.setDefaultTimeRange()
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="less" scoped>
.search-content {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  .el-form {
    margin-right: 15px;
    ::v-deep .el-form-item {
      margin-bottom: 0;
      float: left;
    }
    ::v-deep .treeselect {
      width: 200px;
    }
  }
}
</style>